body{min-width: 960px;font-family: 'PingFangSC','helvetica neue','hiragino sans gb','arial','microsoft yahei ui','microsoft yahei','simsun','sans-serif'!important}
@mixin transitions($args) {
  transition:$args;
  -webkit-transition:$args;
  -moz-transition:$args;
  -o-transition:$args;
  -ms-transition:$args;
}
#header{
  background-color: #fff;position: relative;
  & .header-nav{
    width: 960px;margin: 0 auto;
    min-height: 60px;height: auto;height: 60px;
    position: relative;
    padding: 0 200px;
    box-sizing: border-box;
    & .header-logo{
      position: absolute;
      left: 0;width: 200px;
      & h1{text-indent: -9999px;}
      & img{
        height: 40px;
        margin-top: 10px;
      }
    }
    & .nav{
      height: 100%;
      & ul{
          overflow: hidden;text-align: center;
          height: 100%;
        & li{
          height: 100%;
          display: inline-block;font-size: 0;
          box-sizing: border-box;
          padding: 25px 0;
          & a{
            color: #333;
            font-size: 14px;
            padding: 5px 20px;
          }
          &.active a{border-bottom: 2px solid #00adef;}
          &.none a{color: #ccc;}
        }
      }
    }
    & .nav-right{
      top: 0;
      font-size: 0;
      height: 100%;
      position: absolute;
      right: 0;width: 200px;
      text-align: right;
      & a{
        color: #00adef;
        height: 100%;
        padding: 0 20px;
        display:inline-block;
        font-size: 14px;
        line-height: 60px;
        &.active{background-color: #00adef;color: #fff;}
      }
    }
  }
}
.container {
  & .content {
    & .banner{
       & img{width: 100%;}
    }
    & section{
      &.breadcrumb{
        background-color: #f2f2f2 !important;
        margin: 0 auto;
        padding: 10px 0 !important;
        & h5{
          color: #333;
          letter-spacing: 2px;
        }
        & .breadcrumb-nav{
          & ul li{
            display: inline-block;
            font-weight: 500;
            & a{
              color: #333;
            }
          }
        }
      }
      &.store{
        background-color: #f2f2f2 !important;
        & .section-inner{
          & p.search{
            text-align: center;
            & input{padding: 8px 10px;
              border:1px solid #d8d8d8;
              outline: none;
              vertical-align: middle;
              width: 340px;
              border-radius: 4px 0 0 4px;
            }
            & button{
              padding: 0px 40px;
              outline: none;border: none;
              background: #3bbaff url(../images/icon/icon-search.png) center center no-repeat;
              height: 33px;
              vertical-align: middle;
              background-size: 20px;
              cursor: pointer;
            }
          }
          & .store-goods-cat{
            margin: 30px 0;
            & span{
              color: #333;
              padding: 4px 0;
              letter-spacing: 1px;
              cursor: pointer;
              &.active{
                color: #3bbaff;
                border-bottom: 2px solid #3bbaff;
              }
              &+span{margin-left: 15px;}
            }
          }
        }
      }
      &.store-hot{
        background-color: #e5e5e4 !important;
        & .store-hot-list{
          & h5{
            color: #333;margin: 15px 0;
            letter-spacing: 1px;font-size: 16px;
          }
        }
      }
      &.section-about{
        position: relative;
        background: url(../images/banners/b6.jpg) center center  repeat-x;
        & img.bg{
          width: 100%;
          position: absolute;
          top: 0;bottom: 0;left: 0;right: 0;
          z-index: 1;
        }
        & .section-inner{
          background-color: #4188d1;
          color: #fff;
          padding: 30px;
          box-sizing: border-box;
          position: relative;
          z-index: 2;
          box-shadow: 0 0 40px rgba(255,255,255,0.5);
          & h5{text-align: center;margin: 20px 0;letter-spacing: 1px;font-weight: bold;}
          & article{word-wrap: break-word;word-break: break-all;font-size: 14px;line-height: 20px;}
        }
      }
      &.section-container{
        background-color: #fff;
        padding: 30px 0;
        &.section-products{
          background-color: #f2f2f2;
        }
        & .section-inner{
          width: 960px;margin: 0 auto;
        }
        &.section-leaveMes{
          & .section-mes{
            & h5{
              color: #333;letter-spacing: 2px;
            }
            & p{
              color: #666;font-size: 14px;
              margin: 10px 0;
            }
            & .mesbox{
              background-color: #f9f9f9;
              padding: 30px 20px;
              border: 1px solid #e7e9ea;
              border-radius: 3px;
              & .group-input{
                color: #666;
                & span{
                  vertical-align: middle;
                }
                & input{
                  vertical-align: middle;
                  border:1px solid #b1b1b1;
                  border-radius: 3px;
                  line-height: 25px;
                  padding: 0 15px;
                  outline: none;
                  margin-left: 20px;
                }
                & textarea{
                  margin-left: 20px;
                  vertical-align: top;
                  border:1px solid #b1b1b1;
                  outline: none;
                  border-radius: 3px;
                  resize: none;
                  width: 500px;
                  height: 150px;
                  padding: 10px;
                }
                & button{
                  outline: none;
                  color: #fff;
                  background-color: #3bbaff;
                  border: none;
                  padding: 8px 40px;
                  border-radius: 3px;
                  margin: 10px 0 0 95px;
                }
              }
            }
          }
        }
        &.contact{
          & .contact-inner{
            width: 960px;margin: 0 auto;
            & #map{
              height: 400px;
              position: relative;
            }
            & .contact-info{
              padding: 20px 0;
              & .contact-info-item{
                border-bottom: 1px dashed #d3d3d3;
                font-size: 0;
                & p{width: 50%;display: inline-block;font-size: 14px;line-height: 40px;
                  & span{
                    vertical-align: middle;
                    &.icon{
                      width: 30px;height: 30px;
                      background-size: cover;
                      background-repeat: no-repeat;
                      background-position: center center;
                      display: inline-block;
                      margin-right: 10px;
                      &.icon-address{
                        background-image: url(../images/icon/icon-address.png);
                      }
                      &.icon-phone{
                        background-image: url(../images/icon/icon-phone.png);
                      }
                      &.icon-mail{
                        background-image: url(../images/icon/icon-mail.png);
                      }
                      &.icon-tel{
                        background-image: url(../images/icon/icon-tel.png);
                      }
                    }
                  }
                }
              }
            }
          }
        }
        &.section-list-wrapper{
          & .section-list-inner{
            background-color: #f2f2f2;
          }
          & .section-list-item{
            margin-bottom: 15px;
            background-color: #fff;
            & .service-content{
              background-color: #fff;
              width: 960px;
              margin: 0 auto;
              padding: 30px 0;
              & .service-pic{
                & .service-pic-wrapper{
                  border: 1px solid #eee;
                  padding: 10px;
                  overflow: hidden;
                  width: 300px;
                  & img{
                    width: 300px;
                  }
                }
              }
              & .service-info{
                &.right{
                  margin-left: 350px;
                }
                &.left{
                  margin-right: 350px;
                }
                & h5{color: #333;margin: 30px 0 10px ;}
                & article{
                  color: #999;
                  font-size: 14px;
                  line-height: 20px;
                  word-wrap: break-word;
                  word-break: break-all;
                }
              }
            }
          }
        }
        & .section-detail{
          position: relative;
          margin-top: 30px;
          & .profile-image{
            & img{
              width: 300px;
              margin: 0 30px;
            }
          }
          & .profile-text{
            margin-left: 360px;
            & h2{color: #495669;letter-spacing: 2px;font-size: 20px;margin-bottom: 10px;font-weight: normal;}
            & article{
              color: #9f9f9f;
              line-height: 25px;
              font-size: 14px;
              word-wrap: break-word;
              word-break: break-all;
              height: 100px;
              @include transitions(.3s);
              overflow: hidden;
              &.active{
                height: auto;
              }
            }
            & div.more{
              text-align: right;
              margin-top: 10px;
              & span{
                padding: 8px 30px;
                color: #00adef;border: 1px solid #00adef;
                border-radius: 3px;
                display: inline-block;
                cursor: pointer;
              }
            }
          }
        }
        & .section-title{
          text-align: center;
          & .section-title-en{
            color: #3bbaff;
            font-size: 14px;
          }
          & .section-title-line{
            & span{
              display: inline-block;
              vertical-align: middle;
              &.zone{
                width: 13px;
                height: 13px;
                background-color: #3bbaff;
                transform: rotate(45deg);
                border-radius: 3px;
                position: relative;
                margin: 5px 0;
              }
              &.line{
                width: 100px;height: 1px;background-color: #3bbaff;
                &.line-after{
                  margin-left: 10px;
                }
                &.line-before{
                  margin-right: 8px;
                }
              }
            }
            &:before{

            }
          }
          & .section-title-text{
            color: #333;
            font-family: inherit;
            letter-spacing: 2px;
          }
        }
        & .products-list,&.store .store-goods-list{
          margin-left: -15px;
          & li{
            float: left;
            width:228.75px;
            margin:0 15px 15px 0;
            background-color: #fff;
            padding: 15px 10px;
            box-sizing: border-box;
            transition: .3s;
            -webkit-transition:.3s;
            -moz-transition:.3s;
            -o-transition:.3s;
            -ms-transition:.3s;
            border-radius: 3px;
            box-sizing: border-box;
            &:hover{
              box-shadow: 0 0 15px rgba(0,0,0,0.3);
              transform:scale(1.1);
              -webkit-transform:scale(1.1);
              -o-transform:scale(1.1);
              -moz-transform:scale(1.1);
            }

            & a{
              width: 100%;
              display: block;
              text-align: center;
              & img{
                  width:200px;
              }
              & .products-info{
                & h5{
                  color: #666;margin: 15px 0;font-weight: normal;
                }
                & p{
                  line-height: 25px;
                  & span{
                    &.products-price{
                      color: #f3c41c;
                      margin-right: 10px;
                      font-weight: bold;
                    }
                  }
                  & small{
                    color: #999;font-size: 12px;
                  }
                }
                & .products-add-car{margin: 0 -10px -15px;background-color: #f85665;color: #fff;line-height: 40px;font-size: 14px;}
              }
            }
          }
        }
        & .service-list, & .store-hot-list{
          ul {
            margin-left: -15px;
            li{
              width: 472.5px;
              float: left;
              margin-right: 15px;
              &:hover img{
                transform: scale(1.1);
              }
                & .service-image{
                  position: relative;
                  overflow: hidden;
                  height: 316px;
                  & .service-text{
                    position: absolute;
                    top: 0;right: 0;bottom: 0;left: 0;
                    display:flex;justify-content: center;align-items: center;
                    z-index: 2;
                    & span{
                      color: #fff;
                      background-color:rgba(74,175,233,0.8);
                      padding: 15px 30px;
                      letter-spacing: 2px;
                    }
                  }
                }
                & img{
                  width: 472.5px;
                  transition: .3s;
                  position: relative;
                  z-index: 2;

                }
                & .service-detail{
                  background-color: #fafafa;color: #aaa;
                  padding: 15px;
                  position: relative;
                  & p{
                    font-size: 14px;
                    line-height: 20px;
                    word-wrap: break-word;
                    word-break: break-all;
                    &.more{
                      text-align: right;color: #3bbaff;
                      font-weight: bold;
                      text-decoration: underline;
                    }
                    &.store-hot-addcar{
                      text-align: right;color: #fff;
                      & span{display: inline-block;padding: 7px 20px;background-color: #f85665;font-size: 14px;}
                    }
                  }
                }
            }
          }
        }
      }
    }
  }
}
.footer{
  background-color: #333333;
  padding: 15px 0;
  & .footer-wrapper{
    width: 960px;margin: 0 auto;
    color: #8c8c8c;
    & .footer-indro{
       & p{
         font-size: 14px;
         line-height: 25px;
         font-family: inherit !important;
         & a{color:#8c8c8c; }
       }
    }
    & .footer-qrcode{
      text-align: center;
      & img{width: 100px;}
      & p{font-size: 16px;text-align: center;line-height: 30px;color: #fff;}
    }
  }
}
.pull-right{float: right;}
.pull-left{float: left;}
.clearfix{clear: both;overflow: hidden;}
